<template>
	<view class="">
			
			 
			 
			
			 <view class="home_tab">
			        <view class="home_tab_title">
			        	<view class="title_inner">
			        		 <uni-segmented-control :current="current" :values="items.map(t=>t.title)" @clickItem="onClickItem" style-type="text" active-color="#4cd964"></uni-segmented-control>
			        	</view>
						<view class="icon_search">
							<image src="../../static/fdj.png" mode=""></image>
						</view>
			        </view>
			         <view class="home_tab_content">
			             <view v-if="current === 0">
							     <home-recommend></home-recommend>
			             
			             </view>
			             <view v-if="current === 1">
			                <home-category></home-category>
			             </view>
			             <view v-if="current === 2">
			              <home-new></home-new>
			             </view>
						 <view v-if="current === 3">
						 <home-album></home-album>
						 </view>
			         </view>
			     </view>
	</view>
</template>

<script>
	 import homeAlbum from './home-album'
	 import  homeCategory from './home-category/index.vue'
	 import  homeNew from './home-new/index.vue'
	 import  homeRecommend from './home-recommend/index.vue'
	 import {uniSegmentedControl} from '@dcloudio/uni-ui'
	export default {
		components:{
			homeAlbum  ,
			homeCategory,
			homeNew ,
			homeRecommend,
			uniSegmentedControl
		},
		data(){
			return{
				items: [{
					title:"推荐"
				},
				{
					title:"分类"
				},
				{
					title:"最新"
				},{
					title:"专辑"
				}],
				            current: 0
			}
		},
		 methods: {
		        onClickItem(e) {
		            if (this.current !== e.currentIndex) {
		                this.current = e.currentIndex;
		            }
		        }
		    }
		 }
</script>

<style lang="scss">
	.home_tab .home_tab_title{
	 position: relative;
	}
	.icon_search{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 5%;
		width: 50rpx;
		height: 50rpx;
	}
	.title_inner{
		width: 60%;
		margin: auto;
	}
	/deep/ .icon_search image{
		width: 50rpx;
		height: 50rpx;
		margin-top: -5%;
	}
	 .title_inner {
		 font-size: 26rpx;
		 line-height: 40rpx;
		 
	 }
</style>
